/*
 * @Author: scopesang
 * @Date: 2022-05-12 13:30:30
 * @LastEditors: scopesang
 * @LastEditTime: 2022-05-12 17:02:58
 * @FilePath: \hook-ts\src\example\useCallback.tsx
 * @Description: 
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { memo, useState, useCallback, useMemo } from 'react'
// 儅存在父子組件關係的時，USECALLBACK 必須搭配memmo 一起使用
// setNum 的問題  
// setNum 第二種寫法  num=>num+1
// 用新值替換旧值。 因为useCallback 有缓存
interface Iprops {
    num?: number,
    addNum: () => void
}


const Sub = memo((props: Iprops) => {
    console.log('the children component was forced to update by the parent component');

    return <>
        {/* {props.num} */}
        子组件触发
        <button onClick={props.addNum}>子组件触发  累加 </button>

    </>
})
// 当存在父子关系的时候 memo  搭配 useCallback
const UseCallback = () => {
    const [num, setNum] = useState(0)

    const addNum = useCallback(
        () => {
            // memo  useCallback 形成记忆的功能
            // setNum(num + 1) 替换掉 0
            // 往后都是 原来那个 num + 1 
            console.log(num, "num");
            //这里会出现 只会加1  是setNum 的问题  
            // 用第二种写法 替换掉旧的number  用新值替换旧值
            setNum(num => num + 1)
        },
        [],
    )

    // const addNum = useMemo(
    //     () => {
    //         return () => {
    //             // memo  useCallback 形成记忆的功能
    //             // setNum(num + 1) 替换掉 0
    //             // 往后都是 原来那个 num + 1 
    //             console.log(num, "num");
    //             //这里会出现 只会加1  是setNum 的问题  
    //             // 用第二种写法 替换掉旧的number  用新值替换旧值
    //             setNum(num => num + 1)
    //         }
    //     },
    //     [],
    // )





    return (
        <div>
            <div>  {num}</div>
            <button onClick={addNum}>累加</button>
            <Sub addNum={addNum}></Sub>
            {/* num={num}  */}

        </div>
    )
}

export default UseCallback
